<template>
	<div class="card-service mt16">
		<div class="title">
			<p>服务项目</p>
			<span>仅限上海门店使用</span>
		</div>
		<div class="con-wrap">
			<span></span>
			<p>嘉实多半合成保养套餐 4L（共3次）</p>
		</div>
		<div class="con-wrap">
			<span></span>
			<p>节气门清洗（共3次）</p>
		</div>
		<div class="con-wrap">
			<span></span>
			<p>发动机内部清洗（共3次）</p>
		</div>
		<div class="con-wrap">
			<span></span>
			<p>发动机舱清洁镀膜（共3次）</p>
		</div>
		<div class="con-wrap">
			<span></span>
			<p>20项安全监测（不限）</p>
		</div>
		<div class="con-wrap">
			<span></span>
			<p>发动机内部清洗（共3次）</p>
		</div>

	</div>
		
</template>

<script type="text/javascript">
import Vue from 'vue';

export default {
	  methods: {
	  	
	  }
}
	

</script>


<style lang="scss">
	@import "../../assets/css/_functions.scss";	
	@import "../../assets/css/_variables.scss";	
	
	.card-service{
		background: #fff;
		overflow: hidden;
		>.title{
			padding-left: rem(15);
			height: rem(44);
			line-height: rem(44);
			font-size:rem(14);
			color:#1f323e;
			border-bottom: rem(1) solid #dedede;
			display: flex;
			>p{
				margin-right: rem(12);
			}
			span{
				font-size: rem(13);
				color:#666;
			}
		}
		>.con-wrap{
			width: rem(360);
			margin-left: rem(15);
			height: rem(44);
			line-height: rem(44);
			border-bottom: rem(1) solid #dedede;
			box-sizing: content-box;
			display:flex;
			justify-content: flex-start; 
			span{
				background:#ededed;
				width:rem(10);
				height:rem(10);
				margin-right: rem(10);
				margin-top:rem(17);
				border-radius:100%;
			}
			p{
				font-size:rem(13);
				color:#666666;
				letter-spacing:-0.32px;
			}
			&:last-child{
				border-bottom: none;
			}
		}
	}
</style>